<template>
  <div>
    <i :style="{'font-size':fontSize}"
      :class="{'el-icon-star-on':star>-1,'star-on':star>0,'star-off':star<=0,'el-icon-minus':star<=-1}"
      @click="()=>{this.handleClick(1)}"
    ></i>
    <i :style="{'font-size':fontSize}"
      :class="{'el-icon-star-on':star>-1,'star-on':star>1,'star-off':star<=1,'el-icon-minus':star<=-1}"
      @click="()=>{this.handleClick(2)}"
    ></i>
    <i :style="{'font-size':fontSize}"
      :class="{'el-icon-star-on':star>-1,'star-on':star>2,'star-off':star<=2,'el-icon-minus':star<=-1}"
      @click="()=>{this.handleClick(3)}"
    ></i>
    <i :style="{'font-size':fontSize}"
      :class="{'el-icon-star-on':star>-1,'star-on':star>3,'star-off':star<=3,'el-icon-minus':star<=-1}"
      @click="()=>{this.handleClick(4)}"
    ></i>
    <i :style="{'font-size':fontSize}"
      :class="{'el-icon-star-on':star>-1,'star-on':star>4,'star-off':star<=4,'el-icon-minus':star<=-1}"
      @click="()=>{this.handleClick(5)}"
    ></i>
  </div>
</template>

<script>
/**
 * 组件属性 
 * :star 类型：number 作为组件显示星星的数量 取值：0,1,2,3,4,5对应相应分数  -1对应暂无评分
 * fontSize 类型：String 作为组件内部css样式中font-size的属性值
 * 
 * 组件事件
 * @click 处理函数的第一个参数为点击星星的序号（1~5）
 */
export default {

  props: ["star","fontSize"],
  data() {
    return {};
  },
  methods: {
    handleClick(n) {
        this.$emit('click',n)
    }
  }
};
</script>

<style scoped>
.star-on {
  color: #ff9900;
}
.star-off {
  color: #cccccc;
}
</style>